<!-- daterange picker -->
<link rel="stylesheet" href="__PUBLIC__/AdminLTE/plugins/daterangepicker/daterangepicker.css">
<link rel="stylesheet" type="text/css" href="__PUBLIC__/AdminLTE/plugins/bootstrap-fileinput/css/fileinput.css" />

<div class="content-wrapper">
    <section class="content-header">
        <h1>
            客户列表
            <if condition="$department_id gt 0">
                <small>【{$department_name}】</small>
            </if>
        </h1>
        <ol class="breadcrumb">
            <li><a href="/admin"><i class="fa fa-dashboard"></i> 首页</a></li>
            <li class="active">客户管理</li>
            <li class="active">客户列表</li>
        </ol>
    </section>
    <section class="content">
        <div class="box">
            <div class="box-header with-border">
                <form class="form-inline" action="/admin/customer/customerList" method="get">
                    <if condition="$user_group_id eq 0">
                        <div class="form-group">
                            <label for="type">类别 </label>
                            <select class="form-control" name="type" id="type">
                                <option value="-1">选择类别</option>
                                <foreach name="typeList" item="type" key="key">
                                    <option value="{$key}" <if condition="$key eq $type">selected</if>>{$type}</option>
                                </foreach>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="company_name">公司名称 </label>
                            <input type="text" class="form-control" id="company_name" name="company_name" placeholder="输入公司名" value="{$company_name}">
                        </div>
                        <div class="form-group">
                            <label for="phase">阶段 </label>
                            <select class="form-control" name="phase" id="phase">
                                <option value="-1">选择阶段</option>
                                <foreach name="phaseList" item="phase_val" key="phase_key">
                                    <option value="{$phase_key}" <if condition="$phase_key eq $phase">selected</if>>{$phase_val}</option>
                                </foreach>
                            </select>
                        </div>
                        <div class="form-group">
                            <label>录入时间</label>
                            <div class="input-group">
                                <div class="input-group-addon">
                                    <i class="fa fa-calendar"></i>
                                </div>
                                <input type="text" class="form-control pull-right" name="search_time" id="reservation" value="{$search_time}">
                            </div>
                            <!-- /.input group -->
                        </div>
                        <button type="submit" class="btn btn-info" id="save-btn">查询</button>&nbsp;
                        <button type="button" class="btn btn-danger" onclick="window.location.href='/admin/Customer/editCustomer';">添加</button>
                    </if>
                </form>
            </div>
            <div class="box-body table-responsive">
                <table class="table table-bordered">
                    <tbody>
                    <tr>
                        <th style="width: 40px">ID</th>
                        <th>公司名称</th>
                        <th>客户姓名</th>
                        <th>客户手机号</th>
                        <th>推广产品</th>
                        <th>一级分类</th>
                        <th>二级分类</th>
                        <th>类别</th>
                        <th>级别</th>
                        <th>录入人</th>
                        <th>状态</th>
                        <th>阶段</th>
                        <th>录入时间</th>
                        <th>更新时间</th>
                        <th>资质</th>
                        <th>操作</th>
                    </tr>
                    <if condition="count($customerList) eq 0"><tr><td class="text-center" colspan="12">暂无数据...</td></tr></if>
                    <foreach name="customerList" item="customer">
                            <tr>
                                <td>{$customer.id}</td>
                                <td>{$customer.company_name}</td>
                                <td>{$customer.name}</td>
                                <td>{$customer.mobile}</td>
                                <td>{$customer.product_name}</td>
                                <td>{$customer.first_name}</td>
                                <td>{$customer.second_name}</td>
                                <td>{$customer.type_desc}</td>
                                <td>{$customer.level_desc}</td>
                                <td>{$customer.admin_name}</td>
                                <td>
                                    <if condition="$customer.status eq 1">
                                            <span class="label label-success">{$customer.status_desc}</span>
                                        <elseif condition="$customer.status eq 5" />
                                            <span class="label label-danger refuse-detail" data-detail="{$customer.refuse_reason}" onclick="show_reason(this)">{$customer.status_desc}</span>
                                        <elseif condition="$customer.status eq 10" />
                                            <span class="label label-warning">{$customer.status_desc}</span>
                                        <else />
                                            <span class="label label-primary">{$customer.status_desc}</span>
                                    </if>
                                </td>
                                <td>{$customer.phase_desc}</td>
                                <td>{$customer.create_time}</td>
                                <td>{$customer.update_time}</td>
                                <td>
                                    <if condition="$customer.upfile_count gt 0">
                                        <a type="button" class="btn btn-xs btn-info show-upload" data-id="{$customer.id}" href="javascript:;"><i class="fa fa-cloud-download"></i>下载</a>
                                        <else />
                                        <label class="label label-default">未上传</label>
                                    </if>
                                </td>
                                <td>
                                    <button class="btn btn-primary btn-xs" type="button" onclick="window.location.href='/admin/customer/customerDetail?id={$customer.id}'">详情</button>&nbsp;
                                </td>
                            </tr>
                        </foreach>
                    </tbody>
                </table>
            </div>
            <div class="box-footer clearfix">{$page_html}</div>
        </div>
    </section>
</div>

<!-- Modal1 -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">文件上传</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form id="upload-form" method="post" action="javascript:;" role="form" class="form-horizontal" enctype="multipart/form-data">
                    <input type="hidden" id="up_customer_id" name="up_customer_id" value="">
                    <div class="file-loading">
                        <input id="import" name="import[]" type="file" multiple>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>
<script src="__PUBLIC__/AdminLTE/plugins/bootstrap-fileinput/js/fileinput.min.js"></script>
<script src="__PUBLIC__/AdminLTE/plugins/bootstrap-fileinput/js/plugins/purify.js"></script>
<script src="__PUBLIC__/AdminLTE/plugins/bootstrap-fileinput/js/plugins/sortable.js"></script>
<script src="__PUBLIC__/AdminLTE/plugins/bootstrap-fileinput/js/plugins/piexif.js"></script>
<script src="__PUBLIC__/AdminLTE/plugins/layer/layer.js"></script>
<script src="__PUBLIC__/AdminLTE/plugins/bootstrap-fileinput/js/locales/zh.js"></script>
<!-- date-range-picker -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.2/moment.min.js"></script>
<script src="__PUBLIC__/AdminLTE/plugins/daterangepicker/daterangepicker.js"></script>
<script type="text/javascript">

    function show_modal(p1Json,p2Json) {
        $("#import").fileinput({
            showUpload: false,
            showPreview: true,
            language: "zh",
            // 需要展示的图片设置，比如图片的宽度等
            initialPreviewAsData: true,

            deleteUrl: "/admin/customer/ajaxDeleteFile",
            overwriteInitial: false,
            initialPreview: p1Json,
            initialPreviewConfig : p2Json,
            // 是否展示预览图
            uploadAsync : true,
            // 最少上传的文件个数限制
            minFileCount : 1,
            // 最多上传的文件个数限制
            maxFileCount : 10,
            // 是否显示移除按钮，指input上面的移除按钮，非具体图片上的移除按钮
            showRemove : false,
            //是否显示[选择]按钮,指input上面的[选择]按钮,非具体图片上的上传按钮
            showBrowse : false,
            // 展示图片区域是否可点击选择多文件
            browseOnZoneClick : true,
            // 如果要设置具体图片上的移除、上传和展示按钮，需要设置该选项
            allowedFileExtensions: ['png','jpg','jpeg','zip','rar','7z','xls','xlsx','doc','docx'],
            uploadUrl: '/admin/customer/ajaxUploadQualification',
            uploadExtraData : {customer_id:"{$customer.id}"},
            previewFileIcon: '<i class="fa fa-file"></i>',
        });
    }
    function show_reason(obj) {
        var reason = $(obj).attr('data-detail');
        if(!reason){
           reason = "无拒绝原因";
        }
        layer.alert(reason, {
            skin: 'layui-layer-lan'
            ,closeBtn: 0
            ,anim: 4 //动画类型
        });
    };
    $(function(){
        $(".show-upload").click(function () {
            $("#import").fileinput('destroy');
            var id = $(this).attr('data-id');
            $.post('/admin/customer/ajaxGetUploadFile',{
                id: id
            },function(_data) {
                if(_data.Code == 999) {
                        var p1 = _data.Data.p1||[];
                        var p2 = _data.Data.p2||[];
                        show_modal(p1,p2);
                        $("#exampleModal").modal('show');
                } else {
                    ArtDialogHlp.showInfo('提示', _data.Msg);
                }
            },'JSON');
        });
        //Date range picker
        $('#reservation').daterangepicker({
            autoUpdateInput: false,
            applyClass : 'btn-sm btn-success',
            cancelClass : 'btn-sm btn-default',
            locale: {
                applyLabel: '确认',
                cancelLabel: '取消',
                fromLabel : '起始时间',
                toLabel : '结束时间',
                customRangeLabel : '自定义',
                weekLabel: 'W',
                daysOfWeek:['日','一','二','三','四','五','六'],
                monthNames:['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'],
                firstDay : 1
            },
            startDate: new Date(),
            endDate: new Date(),
            ranges: {
                '今天': [moment(), moment()],
                '昨天': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                '最近7天': [moment().subtract(6, 'days'), moment()],
                '最近30天': [moment().subtract(29, 'days'), moment()],
                '本月': [moment().startOf('month'), moment().endOf('month')],
                '上个月': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
            }
        });
        $('#reservation').on('apply.daterangepicker', function(ev, picker) {
            $(this).val(picker.startDate.format('MM/DD/YYYY') + ' - ' + picker.endDate.format('MM/DD/YYYY'));
        });
        $('#reservation').on('cancel.daterangepicker', function(ev, picker) {
            $(this).val('');
        });
    });
</script>